<template>
    <div style="marginTop:-20px;">
        <el-form ref="form" :model="form"  :inline="true" label-width="80px">
            <el-form-item label="产品编码:">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="产品名称:">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="产品类型:">
                <el-select v-model="form.region" placeholder="请选择产品类型">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="特性:">
                <el-select v-model="form.region" placeholder="请选择特性">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="规格型号:">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="照片尺寸:">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="单位:">
                <el-select v-model="form.region" placeholder="请选择单位">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="单价:">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="加页价:">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="成本价:">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="上架时间:">
                <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="下架时间:">
                <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="工序模板:">
                <el-select v-model="form.region" placeholder="请选择工序模板">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注:">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="状态:">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
        </el-form>

        <el-form ref="form" :model="form"  :inline="true" label-width="102px" style="paddingLeft:10px;marginTop:20px;">           
            <div style="width:100%;height:30px;"><h5 style="fontWeight:400">物料版本</h5></div>
            <el-form-item label="物料版本:" style="width:100%;">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="版本说明:">
                <el-input v-model="form.name"></el-input>
            </el-form-item>           
            <el-form-item label="有效起始日期:">
                <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>          
            <el-form-item label="有效终止日期:">
                <el-date-picker
                    v-model="value2"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
        </el-form>

        <el-table
            :data="tableData"
            border
            height="250"
            :header-cell-style="{background:'#eef1f6',color:'#909399'}"
            style="width: 100%;marginTop:20px;">
            <el-table-column
                fixed
                type="selection" 
                align="center"
                width="45">
            </el-table-column>
            <el-table-column
            type="index"
            align="center"
            label="序号"
            width="50">
            </el-table-column>
            <el-table-column
            prop="date"
            align="center"
            label="行号">
            </el-table-column>
            <el-table-column
            prop="name"
            align="center"
            label="工序号">
            </el-table-column>
            <el-table-column
            prop="address"
            align="center"
            label="工序名称">
            </el-table-column>
            <el-table-column
            prop="date"
            align="center"
            label="组件编码">
            </el-table-column>
            <el-table-column
            prop="name"
            align="center"
            label="组件名称">
            </el-table-column>
            <el-table-column
            prop="address"
            align="center"
            label="规格型号">
            </el-table-column>
            <el-table-column
            prop="name"
            align="center"
            label="单位">
            </el-table-column>
            <el-table-column
            prop="address"
            align="center"
            label="基本用量">
            </el-table-column>
            <el-table-column
                align="center"
                label="操作">
                <template>
                    <span style="color:#0095FF;cursor:pointer;">修改</span>
                </template>
            </el-table-column>
        </el-table>

        <div style="width:100%;textAlign:center;marginTop:20px;">
            <el-button type="primary">保    存</el-button>
            <el-button type="primary">保存新增</el-button>
            <el-button>取消</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            form:{
                name:'',
                region:'',
                
            },
            tableData:[
                {
          date: '2016-05-02',
          name: '王小虎',
          address: '1'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '1'
        },
            ],
            pickerOptions: {
                
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            value1: '',
            value2: '',
        }
    }
}
</script>

<style lang="scss" scoped>
// *{
//     height: 600px;
// }
.el-form{
    width: 100%;
    padding-top:10px;
    padding-left: 30px; 
    border: 1px solid #eee;
    .el-form-item{
        width: 30%;
        margin-bottom: 12px;
        .el-input{
            width: 200px;
        }
    }
}
</style>